<template>
	<view class="groupactiveverify">
		<view class="pd-30">
			<view class="content_cell_box">
				<view class="mb-10 display_flex">
					<view class="f-14 flex-1">整体活动照片</view>
				</view>
				<view class="content_img_box1" v-for="(item,index) in form.bigimages" :key="index">
					<image class="content_img1" :src="picUrl+item" mode="widthFix" @click="checkImg(form.bigimages,index)">
					</image>
				</view>

				<view class="check_input_box">
					<view class="display_flex mt-10" @click="changeAudit(1,1)">
						<uni-icons v-if="form.bigimages_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10" @click="changeAudit(1,2)">
						<uni-icons v-if="form.bigimages_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea" v-if="form.bigimages_status==2">
					<view v-if="form.status==1">
						<textarea style="height: 140rpx;" v-model="form.bigimages_text" placeholder="未审核通过原因(限500字)"
							maxlength="500" :disable-default-padding="true"></textarea>
					</view>
					<view v-else>{{form.bigimages_text}}</view>
				</view>
			</view>
			<view class="content_cell_box">
				<view class="mb-15 display_flex">
					<view class="f-14 flex-1">六大愉悦活动照片</view>
				</view>
				<view class="mb-15" v-if="form.image1.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">了解</view>
					</view>
					<view class="content_img_box_col">
						<uni-row :gutter="20">
							<uni-col v-for="(item,index) in form.image1" :key="index" :span="8">
								<image class="content_img_col" :src="picUrl+item" mode="aspectFill"
									@click="checkImg(form.image1,index)">
								</image>
							</uni-col>
						</uni-row>
					</view>
				</view>
				<view class="mb-15" v-if="form.image2.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">相遇</view>
					</view>
					<view class="content_img_box_col">
						<uni-row :gutter="20">
							<uni-col v-for="(item,index) in form.image2" :key="index" :span="8">
								<image class="content_img_col" :src="picUrl+item" mode="aspectFill"
									@click="checkImg(form.image2,index)">
								</image>
							</uni-col>
						</uni-row>
					</view>
				</view>
				<view class="mb-15" v-if="form.image3.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">创造</view>
					</view>
					<view class="content_img_box_col">
						<uni-row :gutter="20">
							<uni-col v-for="(item,index) in form.image3" :key="index" :span="8">
								<image class="content_img_col" :src="picUrl+item" mode="aspectFill"
									@click="checkImg(form.image3,index)">
								</image>
							</uni-col>
						</uni-row>
					</view>
				</view>
				<view class="mb-15" v-if="form.image4.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">驾控</view>
					</view>
					<view class="content_img_box_col">
						<uni-row :gutter="20">
							<uni-col v-for="(item,index) in form.image4" :key="index" :span="8">
								<image class="content_img_col" :src="picUrl+item" mode="aspectFill"
									@click="checkImg(form.image4,index)">
								</image>
							</uni-col>
						</uni-row>
					</view>
				</view>
				<view class="mb-15" v-if="form.image5.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">装饰</view>
					</view>
					<view class="content_img_box_col">
						<uni-row :gutter="20">
							<uni-col v-for="(item,index) in form.image5" :key="index" :span="8">
								<image class="content_img_col" :src="picUrl+item" mode="aspectFill"
									@click="checkImg(form.image5,index)">
								</image>
							</uni-col>
						</uni-row>
					</view>
				</view>
				<view class="mb-15" v-if="form.image6.length>0">
					<view class="mb-5 display_flex">
						<view class="f-14 flex-1">热爱</view>
					</view>
					<view class="content_img_box_col">
						<uni-row :gutter="20">
							<uni-col v-for="(item,index) in form.image6" :key="index" :span="8">
								<image class="content_img_col" :src="picUrl+item" mode="aspectFill"
									@click="checkImg(form.image6,index)">
								</image>
							</uni-col>
						</uni-row>
					</view>
				</view>
				<view class="check_input_box">
					<view class="display_flex mt-10" @click="changeAudit(2,1)">
						<uni-icons v-if="form.image_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10" @click="changeAudit(2,2)">
						<uni-icons v-if="form.image_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea" v-if="form.image_status==2">
					<view v-if="form.status==1">
						<textarea style="height: 140rpx;" v-model="form.image_text" placeholder="未审核通过原因(限500字)"
							maxlength="500" :disable-default-padding="true"></textarea>
					</view>
					<view v-else>{{form.image_text}}</view>
				</view>
			</view>
			<view class="content_cell_box">
				<view class="mb-15 display_flex f-13">
					<view class="mr-5">到场核销人数</view>
					<view>{{form.sign_num}}</view>
				</view>
				<view class="mb-15 display_flex f-13">
					<view class="mr-5">活动参与人数</view>
					<view>{{form.nums}}</view>
				</view>

				<view class="check_input_box">
					<view class="display_flex mt-10" @click="changeAudit(3,1)">
						<uni-icons v-if="form.nums_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10" @click="changeAudit(3,2)">
						<uni-icons v-if="form.nums_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea" v-if="form.nums_status==2">
					<view v-if="form.status==1">
						<textarea style="height: 140rpx;" v-model="form.nums_text" placeholder="未审核通过原因(限500字)"
							maxlength="500" :disable-default-padding="true"></textarea>
					</view>
					<view v-else v-else>{{form.nums_text}}</view>
				</view>
			</view>
			<view class="content_cell_box">
				<view class="mb-10 display_flex">
					<view class="f-14 flex-1">UGC截图</view>
				</view>
				<view class="content_img_box_col">
					<uni-row :gutter="20">
						<uni-col v-for="(item,index) in form.UGCimages" :key="index" :span="8">
							<image class="content_img_col" :src="picUrl+item" mode="aspectFill"
								@click="checkImg(form.UGCimages,index)">
							</image>
						</uni-col>
					</uni-row>
				</view>

				<view class="check_input_box">
					<view class="display_flex mt-10" @click="changeAudit(4,1)">
						<uni-icons v-if="form.UGCimages_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10" @click="changeAudit(4,2)">
						<uni-icons v-if="form.UGCimages_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea" v-if="form.UGCimages_status==2">
					<view v-if="form.status==1">
						<textarea style="height: 140rpx;" v-model="form.UGCimages_text" placeholder="未审核通过原因(限500字)"
							maxlength="500" :disable-default-padding="true"></textarea>
					</view>
					<view v-else>{{form.UGCimages_text}}</view>
				</view>
			</view>
			<view class="content_cell_box">
				<view class="mb-10 display_flex">
					<view class="f-14">老带新客户名单</view>
					<view class="f-14 ml-5" v-if="form.userlist.length>0">
						(总人数:{{form.userlist.length}}人；老带新人数:{{form.userlist_id.length}}人)</view>
				</view>
				<view class="groupauditlist_table_header">
					<uni-row gutter="8">
						<uni-col :span="4">
							<checkbox :checked="checkedAll==1" style="transform:scale(0.8)" :disabled="true" />
						</uni-col>
						<uni-col :span="4">
							<view class="text-c">ID</view>
						</uni-col>
						<uni-col :span="8">
							<view class="text-c">姓名</view>
						</uni-col>
						<uni-col :span="8">
							<view class="text-c">手机号</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="f-14 list">
					<checkbox-group>
						<label v-for="item in form.userlist" :key="item.id">
							<view class="groupaudit_cell">
								<uni-row gutter="8">
									<uni-col :span="4">
										<checkbox :value="item.id" :checked="item.checked" style="transform:scale(0.8)"
											:disabled="true" />
									</uni-col>
									<uni-col :span="4">
										<view class="text-c">{{item.id}}</view>
									</uni-col>
									<uni-col :span="8">
										<view class="text-c ellipsis">{{item.name}}</view>
									</uni-col>
									<uni-col :span="8">
										<view class="text-c ellipsis">{{item.mobile}}</view>
									</uni-col>
								</uni-row>
							</view>
						</label>
					</checkbox-group>
				</view>
				<view v-if="form.userlist.length==0" class="page_bottom_loading">- 暂无更多 -</view>
				<view class="check_input_box">
					<view class="display_flex mt-10" @click="changeAudit(5,1)">
						<uni-icons v-if="form.userlist_id_status==1" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>通过</span>
					</view>
					<view class="display_flex mt-10" @click="changeAudit(5,2)">
						<uni-icons v-if="form.userlist_id_status==2" type="circle-filled" size="18"
							color="#191919"></uni-icons>
						<uni-icons v-else type="circle" size="18" color="#191919"></uni-icons>
						<span>未通过</span>
					</view>
				</view>
				<view class="groupmanage_textarea" v-if="form.userlist_id_status==2">
					<view v-if="form.status==1">
						<textarea style="height: 140rpx;" v-model="form.userlist_id_text" placeholder="未审核通过原因(限500字)"
							maxlength="500" :disable-default-padding="true"></textarea>
					</view>
					<view v-else>{{form.userlist_id_text}}</view>
				</view>
			</view>
			<view v-if="form.status==1" class="group_public_btn_block" style="margin: 30rpx 0 60rpx 0;"
				@click="submitVerify">提交审核</view>
		</view>
	</view>
</template>

<script>
	import {
		getActiveVerifyInfo,
		submitSocActiveVerify
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				huodong_id: '',
				form: {
					nums: '', //实际活动参与人数
					bigimages: [], //整体活动照片
					UGCimages: [], //UGC截图
					image1: [],
					image2: [],
					image3: [],
					image4: [],
					image5: [],
					image6: [],
					userlist_id: [], //老带新客户id
					userlist: [],
				},
				auditinfo: '',
				isSubmit: true,
				checkedAll: 0,
				onlinePic: app.globalData.onlinePic,
				picUrl: app.globalData.picUrl,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets.bottom +
					60 : 60,
			};
		},
		onShow() {
			if (uni.getStorageSync('userinfo').is_staff == 0) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		onLoad(options) {
			if (uni.getStorageSync('userinfo').is_staff != 0) {
				this.huodong_id = options.huodong_id
				if (this.huodong_id) {
					this.getActiveVerifyInfo()
				}
			}
			var params = {
				event_code: 'SOC-车友会活动核销审核管理详情',
				path: 'pages/groupmanage/socgroupactiveverifyinfo',
				event_id: this.huodong_id,
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)

		},
		methods: {
			getActiveVerifyInfo() {
				getActiveVerifyInfo({
					huodong_id: this.huodong_id
				}).then(res => {
					if (res.state == 1) {
						this.form = res.data.info
						var userlist = res.data.info.userlist
						var userlist_id = res.data.info.userlist_id
						if (userlist.length > 0) {
							userlist.forEach(user => {
								// 检查user的id是否在list数组中  
								if (userlist_id.includes(user.id)) {
									// 如果在，将checked设置为true  
									user.checked = true;
								}
							});
							this.form.userlist = userlist
							if (userlist.length != userlist_id.length) {
								this.checkedAll = 0
							} else {
								this.checkedAll = 1
							}
						}

					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeAudit(type, status) {
				if (this.form.status == 1) {
					if (type == 1) {
						this.form.bigimages_status = status
						if (status == 1) {
							this.form.bigimages_text = ''
						}
					} else if (type == 2) {
						this.form.image_status = status
						if (status == 1) {
							this.form.image_text = ''
						}
					} else if (type == 3) {
						this.form.nums_status = status
						if (status == 1) {
							this.form.nums_text = ''
						}
					} else if (type == 4) {
						this.form.UGCimages_status = status
						if (status == 1) {
							this.form.UGCimages_text = ''
						}
					} else if (type == 5) {
						this.form.userlist_id_status = status
						if (status == 1) {
							this.form.userlist_id_text = ''
						}
					}
				}

			},
			submitVerify() {
				var that = this
				if (that.form.bigimages_status == 2) {
					if (that.form.bigimages_text == '') {
						uni.showToast({
							title: '请填写活动整体照片拒绝理由',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false
					}
				}
				if (that.form.image_status == 2) {
					if (that.form.image_text == '') {
						uni.showToast({
							title: '请填写六大愉悦照片拒绝理由',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false
					}
				}
				if (that.form.nums_status == 2) {
					if (that.form.nums_text == '') {
						uni.showToast({
							title: '请填写参与人数拒绝理由',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false
					}
				}
				if (that.form.UGCimages_status == 2) {
					if (that.form.UGCimages_text == '') {
						uni.showToast({
							title: '请填写UGC照片拒绝理由',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false
					}
				}
				if (that.form.userlist_id_status == 2) {
					if (that.form.userlist_id_text == '') {
						uni.showToast({
							title: '请填写老带新名单拒绝理由',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						return false
					}
				}
				if (that.isSubmit) {
					that.isSubmit = false
					uni.showModal({
						content: '确认提交审核吗',
						confirmText: '确认',
						confirmColor: '#00A0DC',
						success: function(res) {
							if (res.confirm) {
								console.log(that.form)
								submitSocActiveVerify(that.form).then(res => {
									if (res.state == 1) {
										uni.showToast({
											title: '提交成功',
											mask: true,
											icon: 'success',
											duration: 1500
										})
										uni.setStorage({
											key: 'onload',
											data: 'true',
											success() {}
										})
										that.getActiveVerifyInfo()
										that.isSubmit = true
									} else {
										that.isSubmit = true
										uni.showToast({
											title: res.error[0],
											mask: true,
											icon: 'none',
											duration: 1500
										})
									}
								})
								var params = {
									event_code: 'SOC-车友会活动核销审核管理详情',
									path: 'pages/groupmanage/socgroupactiveverifyinfo',
									event_id: that.huodong_id,
									title: '',
									source_page: 'SOC-车友会活动核销审核管理详情-提交',
									value: '',
								}
								app.BurialPoint(params)
							} else if (res.cancel) {
								that.isSubmit = true
								console.log('用户点击取消');
							}
						}
					});
				}

			},
			checkImg(list, index) {
				let urls = list.map(item => this.picUrl + item);
				console.log(urls)
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {

			}
		}
	}
</script>

<style lang="scss">
	.groupactiveverify {

		.groupmanage_input_box {
			height: 84rpx;
			font-size: 26rpx;
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			border-radius: 4px;
			border: 2rpx solid #F7F7F7;
			background-color: #F7F7F7;

			.uni-select {
				border: 0px solid #E9E9E9 !important;
				box-sizing: border-box;
				border-radius: 4px;
				padding: 0 0 !important;
				border-bottom: solid 0px #E9E9E9 !important;
				width: 100%;
				flex: 1;
				height: 0 !important;
				margin-left: 10rpx;
				font-size: 26rpx;
				
			}

			.time_input {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				height: 84rpx;
				padding: 0 30rpx;
				flex: 1;
			}

			.icon-calendar {
				display: none;
			}

		}

		.content_cell_box {
			margin: 20rpx 0;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;
			border: 2rpx solid #F7F7F7;
			background-color: #F7F7F7;

			.active_top_img {
				width: 100%;
				height: calc(50vw - 60rpx);
				border-radius: 8rpx;
			}

			.active_top_img_block {
				width: 100%;
				height: calc(50vw - 60rpx);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F0F0F0;
			}

			.content_img_box1 {
				position: relative;
				width: 100%;
				border-radius: 8rpx;
				margin-bottom: 20rpx;

				.content_img1 {
					width: 100%;
					border-radius: 8rpx;
				}
			}

			.content_img_box_col {
				width: 100%;
				border-radius: 8rpx;
				margin-bottom: 20rpx;

				.uni-col {
					margin-bottom: 20rpx;
				}

				.content_img_col {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
				}
			}



			.content_img_box {
				position: relative;
				width: 100%;
				height: calc(50vw - 60rpx);
				border-radius: 8rpx;
				margin-bottom: 20rpx;

				.content_img {
					width: 100%;
					height: calc(50vw - 60rpx);
					border-radius: 8rpx;
				}

				.content_img_del {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					z-index: 1;
					padding: 20rpx;
				}
			}


			.content_img_block {
				width: 100%;
				height: calc(50vw - 60rpx);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				background-color: #F0F0F0;
			}
		}

		.check_input_box {
			font-size: 26rpx;
			margin-top: 20rpx;
		}

		.groupmanage_textarea {
			font-size: 26rpx;
			height: 140rpx;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
			border: 2rpx solid #F2F2F2;
		}

		.list {
			margin-top: 20rpx;

			.groupaudit_cell {
				padding: 20rpx 0;
				margin-bottom: 10rpx;
				border-radius: 8rpx;
				background-color: #F7F7F7;

				.user_avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>